<template>
    <div id="stationDetail">
        <div style="z-index: 1">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <!-- 粘性布局 -->
                <van-sticky>
                    <!-- 导航栏 -->
                    <van-nav-bar title="工位信息" left-arrow @click-left="onClickLeft" />
                </van-sticky>

                <van-row>
                    <van-col span="15">
                        <van-card v-for="item in storeStation" :key="item.station" :thumb="item.picture"
                            style="text-align: left; font-size: 15px;background-color: white">
                            <template #tags>
                                <!-- 工位名称 -->
                                <van-cell class="stationName"
                                    style="font-size: 16px;margin-top: -10px;margin-left: -5px; ">
                                    {{ item.stationName }}
                                </van-cell>
                                <div class="interval" style="padding-left: 10px" v-if="item.idle <= 0">
                                    <div style="width: 140px ;">
                                        <div style="float: left;width: 60px;">
                                            <van-tag class="min2" type="medium" size="medium">空闲中
                                            </van-tag>
                                        </div>
                                        <div style="width:70px;float: right;">
                                            <van-tag class="min4" type="medium" size="medium"
                                                @click="washCar(item.station)">立即洗车
                                            </van-tag>
                                        </div>
                                    </div>
                                    <div style="padding-top: 5px; text-algin: left; font-size: 13px;width: 150px">
                                        无需等待，可立即洗车
                                    </div>
                                </div>

                                <div class="interval" style="padding-left: 10px" v-else>
                                    <van-tag class="min3" type="medium" size="large">使用中
                                    </van-tag>
                                    <div style="padding-top: 10px; font-size: 13px">
                                        请耐心等待
                                    </div>
                                </div>
                            </template>
                        </van-card>
                    </van-col>
                </van-row>
            </van-pull-refresh>
        </div>
    </div>
</template>
<script>
import { Toast } from "vant";

export default {
    setup() {
        const onClickLeft = () => history.back();
        return {
            onClickLeft,
        };
    },
    data() {
        return {
            isLoading: false, //刷新参数
            storeId: '',
            storeStation: [],
            storeBindDetail: []
        }
    },
    created() {
        this.storeId = this.$route.query.storeId;
        this.selectStoreStation(this.storeId);
        this.selectUser();
    },
    methods: {
        //刷新方法
        onRefresh() {
            setTimeout(() => {
                Toast("刷新成功");
                this.isLoading = false;
                //调用请求
            }, 1000);
        },
        //通过storeId查询工位
        selectStoreStation(storeId) {
            this.$http.post("/store/station/selectByStoreId?storeId=" + storeId).then(resp => {
                this.storeStation = resp.data.data;
            })
        },
        //洗车
        washCar(stationId) {
    // 找到当前工位的数据
    const currentStation = this.storeStation.find(item => item.station === stationId);
    if (!currentStation) return;

    const amount = currentStation.userBalance?.amount || 0;
    console.log(amount, "当前工位余额");

    if (amount < 10) {
        this.$dialog.confirm({
            title: "提示",
            message: "您的余额不足十元，是否立即充值",
            confirmButtonColor: "red",
        }).then(() => {
            this.$router.push({
                path: "/Payment",
                query: { storeId: this.storeId }
            });
        }).catch(() => {});
    } else {
        this.$router.push({
            path: "/BindCarOfStore",
            query: { 
                storeId: this.storeId, 
                userId: this.userId, 
                stationId: stationId 
            }
        });
    }
},
        //获取用户信息
        selectUser() {
            this.$http.get("/vip/customer/getUserInfo").then(resp => {
                this.userId = resp.data.data.userId;
                this.storeBindMsg();
            })
        },
        storeBindMsg() {
            this.$http.post("/store/selectStoreBind?userId=" + this.userId).then(resp => {
                this.storeBindDetail = resp.data.data;
                this.storeBindDetail = this.storeBindDetail.filter(item => {
                    if (item.amount == null) {
                        item.amount = "0.00"
                    }
                    return item.storeId == this.storeId;
                });

            })
        },
    }
}
</script>
<style scoped>
.min2 {
    background-color: #00cc00;
    padding: 2px 5px 2px 5px;
    font-size: 14px;
    border-radius: 4px;
}

.min4 {
    background-color: #6A8BFA;
    padding: 2px 5px 2px 5px;
    font-size: 14px;
    border-radius: 4px;
}

.min3 {
    background-color: #FFA500;
    padding: 2px 5px 2px 5px;
    font-size: 14px;
    border-radius: 4px;
}

.interval {
    margin-top: 5px;
}
</style>